<template>
  <div>
    <div>
      <c-table-box
        ref="cTableBox"
        hide-func
        checkbox
        :other-filters="otherFilters"
        :table-config="tableConfig"
        @selection-change="selectionChange"
      >
        <template #btn>
          <c-permission v-if="type==='all'" code="all">
            <c-button opt-code="edit" type="primary" @click="handleEdit(1)">编辑进度</c-button>
            <c-button opt-code="export" type="primary" @click="handleExport">导出</c-button>
          </c-permission>
          <c-permission v-if="type==='fileAudit'" code="fileAudit">
            <c-button opt-code="audit" type="primary" @click="handleAudit">审核合同</c-button>
          </c-permission>
          <c-permission v-if="type==='overTime'" code="overTime">
            <c-button opt-code="edit" type="primary" @click="handleEdit(2)">编辑进度</c-button>
          </c-permission>
        </template>
      </c-table-box>
      <Edit v-if="showEdit" ref="refEditDlg" :detail-data="activeRowData" :visible.sync="showEdit" @success="refreshTable" />
      <Audit v-if="showAudit" ref="refAuditDlg" :detail-data="activeRowData" :visible.sync="showAudit" @success="refreshTable" />
      <export-files v-if="exportVisible" title="导出" :config="exportAllConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />
    </div>
    <!-- <Detail v-if="showDetail" ref="refEditDlg" :detail-data="activeRowData" :visible.sync="showDetail" /> -->
  </div>
</template>
<script>
import { otherFiltersItem } from '@/utils'
import Edit from './component/Edit.vue'
import Audit from './component/Audit.vue'
export default {
  name: 'List',
  components: { Edit, Audit },

  props: {
    type: {
      type: String,
      default: ''
    },
    activeType: {
      type: String,
      default: ''
    },
    serachFilters: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDetail: false,
      exportVisible: false,
      typeFilters: [],
      id: '',
      delayLoading: false,
      stopLoading: false,
      doorHeadOptions: [],
      decorationFormOptions: [],
      applyBizTypeOptions: [],
      applySpecialZoneOptions: [],
      activeDataId: '',
      centerDialogVisible: false,
      loading: false,
      confirmVisible: false,
      showEdit: false,
      showAudit: false,
      // showInformation: false,
      activeTabIndex: 0,
      activeName: 'all',
      activeRowData: {},
      showOpenExe: false, // 打开开业执行弹窗
      showResultAudit: false, // 打开开业结果审核弹窗
      handlefilters: [],
      showApply: false,
      tableSelected: [], // 当前所选中表格行数据
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/decorationDelegateDetail/negotiationTaskPage`,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 0,
        pageSize: 10,
        order: 'desc',
        // sort: 'createTime',
        // 表格字段动态配置
        setting: [
          {
            prop: 'constCode',
            label: '门店建设项目号',
            minWidth: '110',
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'decorationTaskCode',
            label: '装修任务号',
            minWidth: '110'
          },
          {
            prop: 'negotiationTaskCode',
            label: '洽谈任务号',
            minWidth: '130'
          },
          {
            prop: 'officeName',
            label: '办事处',
            minWidth: '110'
          },
          {
            prop: 'applicantName',
            label: '装修申请人',
            minWidth: '110'
          },
          {
            prop: 'clientCode',
            label: '客户编码',
            minWidth: '110'
          },
          {
            prop: 'clientName',
            label: '客户名称',
            minWidth: '110'
          },
          {
            prop: 'shopCode',
            label: '门店编码',
            minWidth: '110'
          },
          {
            prop: 'shopName',
            label: '门店名称',
            minWidth: '110'
          },
          {
            prop: 'customerName',
            label: '经销商名称',
            minWidth: '110'
          },
          {
            prop: 'customerPhone',
            label: '经销商电话',
            minWidth: '110'
          },
          {
            prop: 'unitName',
            label: '施工单位名称',
            minWidth: '110'
          },
          {
            prop: 'principal',
            label: '负责人',
            minWidth: '110'
          },
          {
            prop: 'negotiationTaskIsTimeOut',
            label: '洽谈是否超时',
            minWidth: '110',
            formatData: ({ negotiationTaskIsTimeOut }) => {
              if (negotiationTaskIsTimeOut === '0' || negotiationTaskIsTimeOut === '1') return negotiationTaskIsTimeOut === '0' ? '否' : '是'
              else return negotiationTaskIsTimeOut
            }
          },
          {
            prop: 'negotiationTaskProgress',
            label: '洽谈进度',
            minWidth: '110',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'NEGOTIATION_PROGRESS'
            }
          },
          {
            prop: 'negotiationTaskState',
            label: '洽谈状态',
            minWidth: '110',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'NEGOTIATION_STATE'
            }
          },
          {
            prop: 'remark',
            label: '洽谈记录',
            minWidth: '110'
          },
          {
            prop: 'appointedTime',
            label: '约看现场时间',
            minWidth: '110'
          }

        ]
      }
    }
  },
  computed: {
    otherFilters() {
      return [...this.serachFilters, ...this.typeFilters]
    },
    selectedIds() {
      return this.tableSelected.map(row => {
        return row.id
      })
    },
    exportAllConfig() {
      return [{
        code: 'export',
        name: '洽谈需求',
        dataApi: '/slm-admin/api/v1/decorationDelegateDetail/exportData',
        selectedRows: [], // this.tableSelected,
        paramsRaw: {},
        headers: { 'Permission-perCode': '' },
        filtersRaw: this.otherFilters,
        queryField: 'decorationDelegateDetailId'
      }]
    }
  },
  watch: {
    type: {
      handler(v) {
        this.setOtherFilters(v)
      },
      immediate: true
    },
    serachFilters: {
      handler(v) {
        if (this.activeType !== this.type) return
        this.refreshTable('')
      }
    }
  },
  activated() {
    if (this.ready && this.refreshTable) {
      this.refreshTable()
    }
  },
  deactivated() {
    this.ready = true
  },
  created() {
  },
  methods: {

    selectionChange(v) {
      this.tableSelected = v
    },

    // 导出
    handleExport() {
      this.exportVisible = true
    },
    handleDetail(val) {
      this.$router.push({ name: 'NegotiationDetail', query: { id: val.decorationDelegateDetailId }})
    },

    // 设置过滤条件
    setOtherFilters(v) {
      switch (v) {
        case 'all':
          this.typeFilters = []
          break
        case 'fileAudit':
          this.typeFilters = [
            otherFiltersItem('negotiationTaskState', 'A', '='),
            otherFiltersItem('negotiationTaskProgress', 'E', '=')
          ]
          break
        case 'overTime':
          this.typeFilters = [
            otherFiltersItem('negotiationTaskState', 'A', '='),
            otherFiltersItem('negotiationTaskProgress', '[A,B,C]', 'in'),
            otherFiltersItem('negotiationTaskIsTimeOut', '1', '=')]
          break
      }
    },
    // 审核合同
    handleAudit() {
      if (!this.singleJudge(this.tableSelected, '审核', true)) {
        return
      }
      this.activeRowData = this.tableSelected[0]
      this.showAudit = true
    },
    // 编辑进度
    handleEdit(type) {
      if (!this.singleJudge(this.tableSelected, '编辑', true)) {
        return
      }
      if (type === 1 && ((this.tableSelected[0].negotiationTaskState && this.tableSelected[0].negotiationTaskState.toLowerCase() !== 'a') || this.tableSelected[0].negotiationTaskProgress === 'F')) {
        this.$message.warning('该洽谈进度和状态不可编辑')
        return
      }
      this.activeRowData = this.tableSelected[0]
      this.showEdit = true
    },
    // 刷新表格
    refreshTable(v = 'onPage') {
      this.$nextTick(() => {
        this.$refs.cTableBox.initTableData(v)
      })
    },

    // 导出成功
    handleExportSuccess() {
      this.$message.success('导出成功！')
    }
  }
}
</script>
